import React, { useEffect, useState } from "react";
import PropTypes from 'prop-types'
import {ScH1 as Box} from './style'
class TextChild extends React.PureComponent {

  constructor (props) {
    super(props)
    this.state = {
      hasError: false,
      email: this.props.defaultEmail,
      prevPropsUserID: this.props.userID,
      data: {
        msg: '第一次传递参数'
      }
    };
  }
  static getDerivedStateFromProps(props, state) {
    // 只要当前 user 变化，
    // 重置所有跟 user 相关的状态。
    // 这个例子中，只有 email 和 user 相关。
    if (props.userID !== state.prevPropsUserID) {
      return {
        prevPropsUserID: props.userID,
        email: props.defaultEmail
      };
    }
    return null;
  }
  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染可以显降级 UI
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // "组件堆栈" 例子:
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    // logComponentStackToMyService(info.componentStack);
  }
  componentDidCatch() {

  }

  componentDidMount () {

  }

  getSnapshotBeforeUpdate () {

  }
  componentDidUpdate () {

  }
  componentWillUnmount () {

  }
  render () {
    let {prevPropsUserID,email} = this.state
    if (this.state.hasError) {
      // 你可以渲染任何自定义的降级  UI
      return <h1>Something went wrong.</h1>;
    }
    return <div>
        <Box color={'skyblue'}>
          {this.props.header} {prevPropsUserID}
        </Box>
        <Box>
        {this.props.footer} {email}
        </Box>
      <Box>
      {this.props.children(this.state.data)}
      </Box>
    </div>
  }
}

TextChild.propTypes = {
  defaultEmail:PropTypes.string,
  userID:PropTypes.string,
  header: PropTypes.node,
  footer: PropTypes.node
}

TextChild.defaultProps = {
  header: <div>默认头部</div>,
  footer: <div>默认底部</div>,
  defaultEmail: '125@qq.com',
  userID: '1211'
}

export default TextChild